<template>
  <div class="detailsBox" :style="{
    position: isPup ? 'absolute' : 'fixed'
  }">
    <div class="detailsBox-header" v-if="!isPup">
      <div class="detailsBox-left" @click="backBtn">
        <el-icon>
          <ArrowLeft />
        </el-icon>
        <h3>{{ title }}</h3>
      </div>
      <div class="detailsBox-right" v-if="$slots.headR">
        <slot name="headR" />
      </div>
    </div>
    <div class="detailsBox-main">
      <div class="detailsBox-flex" :style="{
        width: proxy.$size(leftWidth, '300px')
      }" v-if="$slots.left">
        <el-scrollbar>
          <slot name="left" />
        </el-scrollbar>
      </div>
      <div class="detailsBox-center">
        <slot v-if="isFull"></slot>
        <template v-else>
          <el-scrollbar>
            <slot />
          </el-scrollbar>
        </template>
      </div>
    </div>
    <div class="detailsBox-info" v-if="$slots.info || $slots.btn">
      <div class="detailsBox-left list-r-12">
        <slot name="info" />
      </div>
      <div class="detailsBox-right" v-if="$slots.btn">
        <slot name="btn" />
      </div>
    </div>
  </div>
  <DrawerJson :json="json" />
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    title?: string;
    style?: any;
    margin?: number | string;
    padding?: number | string;
    width?: number | string;
    leftWidth?: number | string | null;
    json?: any;
    isFull?: boolean;
    isPup?: boolean;
  }>(),
  {
    title: '标题',
    padding: 12,
    margin: 12,
    leftWidth: 300,
    style: {},
  },
);
//按钮监听-组合按钮
import { useKeydown } from '@/utils/useKeydown.ts';
useKeydown(['Escape'], (event: any) => {
  event.preventDefault();
  backBtn()
});
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'backBtn'): void;
}>();

const backBtn = () => {
  emit('backBtn');
};
// 当组件挂载时添加事件监听器
onMounted(() => {

});

</script>
<style scoped lang="scss">
.detailsBox {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: $bg;
  display: flex;
  flex-direction: column;

  >* {
    &:not(:last-child) {
      border-bottom: 1px $border solid;
    }
  }

  .detailsBox-info {
    background: $white;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
  }

  .detailsBox-header {
    background: $white;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;

    >* {
      display: flex;
      align-items: center;

      &:not(:last-child) {
        margin-right: 8px;
      }

      >* {
        display: flex;
        align-items: center;

        &:not(:last-child) {
          margin-right: 8px;
        }
      }
    }

    .detailsBox-left {
      cursor: pointer;
    }
  }

  .detailsBox-main {
    position: relative;
    flex: 1;
    overflow: hidden;
    display: flex;

    >* {
      &:not(:last-child) {
        border-right: 1px $border solid;
      }
    }

    .detailsBox-flex {
      background: #fff;
    }

    .detailsBox-center {
      position: relative;
      flex: 1;
      overflow: hidden;
    }
  }
}
</style>
